<template>
  <div class="account-info-warp">
    <div class="flex-box justify-center align-center">
      <div class="flex-box justify-center align-center logo-warp">
        <img class="logo" src="@/assets/img/account.png" alt="" />
      </div>
    </div>
    <div class="tac" style="margin-top: 20px; font-size: 20px">
      {{ userInfo.userName || "--" }}
    </div>
    <div class="tac text" style="margin-top: 10px">
      <!-- 总之就是非常可爱！ -->
      形而上学，不行上班
    </div>
    <div class="user-info-list">
      <p>
        <el-icon class="icon-warp"><CreditCard /></el-icon>
        <span class="text">前端开发</span>
      </p>
      <p>
        <el-icon class="icon-warp"><Discount /></el-icon>
        <span class="text"
          >蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</span
        >
      </p>
      <p>
        <el-icon class="icon-warp"><LocationInformation /></el-icon>
        <span class="text">四川省成都市</span>
      </p>
    </div>
    <div>
      <div class="title">标签</div>
      <div class="tag-list">
        <el-tag v-for="(item, i) in tagList" :key="i" class="item">{{
          item.name
        }}</el-tag>
      </div>
    </div>
    <div style="margin-top: 40px">
      <el-timeline style="padding-left: 0px">
        <el-timeline-item
          v-for="(activity, index) in timeline"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.account-info-warp {
  padding: 20px;
  .title {
    margin-bottom: 10px;
  }
  .text {
    color: rgba(0, 0, 0, 0.85);
  }
  .tag-list {
    .item {
      margin-right: 10px;
    }
  }
  .icon-warp {
    position: relative;
    top: 2px;
    margin-right: 10px;
  }
  .user-info-list {
    padding: 20px;
    & > div {
      margin-bottom: 10px;
    }
  }
  .logo-warp {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #a7dbff;
    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>
<script setup lang="ts">
import {
  CreditCard,
  Discount,
  LocationInformation,
} from "@element-plus/icons-vue";
import { useHeader } from "@/hooks/layout/useHeader";
const { userInfo } = useHeader();

const tagList = [
  { name: "只想摆烂~" },
  { name: "只想摆烂~" },
  { name: "只想摆烂~" },
  { name: "只想摆烂~" },
];

const timeline = [
  {
    content: "准备划水🚣",
    timestamp: "2018-04-15",
  },
  {
    content: "划水ing🚣",
    timestamp: "2018-04-13",
  },
  {
    content: "只想划水🚣",
    timestamp: "2018-04-11",
  },
];
</script>
